<template>
    <div class="RegisterView">
        <div class="Register-one">
            <div class="Register-top">
                <div class="top-left">
                    <div class="left-title">
                        <p>车响汽车CRM系统</p>
                        <p>CAR CRM SYSTEM</p>
                    </div>

                    <div class="left-btn">
                        <div class="btn">

                        </div>
                        <div class="btn">

                        </div>
                        <div class="btn">

                        </div>
                    </div>
                </div>

                <el-form class="top-right" :rules="rules" ref="userlist" :model="userlist">
                    <div class="right-title">
                        注册
                    </div>
                    <div class="right-input">
                        <el-form-item label="" prop="userName">
                            <el-input class="zhanghao" type="text" v-model="userlist.userName" placeholder="请输入昵称"
                                autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="phoneNum">
                            <el-input class="souji" id="souji" type="text" v-model="userlist.phoneNum" placeholder="请输入手机号"
                                autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="passWord">
                            <el-input class="mima" type="password" v-model="userlist.passWord" placeholder="请输入密码"
                                autocomplete='new-password'></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="checkPass">
                            <el-input class="mima" type="password" v-model="userlist.checkPass" placeholder="请再次输入密码"
                                autocomplete='new-password'></el-input>
                        </el-form-item>

                    </div>

                    <div class="right-btn">
                        <button class="btn" @click="submitForm('userlist')">注册</button>
                        <button class="btn" @click="resetForm('userlist')">重置</button>
                    </div>
                    <div class="right-login">
                        <span @click="goLogin()">去登录</span>
                    </div>

                </el-form>

            </div>
        </div>
    </div>
</template>

<script>
import { getUserList, addUser, addUserInfor } from "../api/index"

export default {
    name: "RegisterView",
    data() {
        // 密码和再次输入密码判断
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.userlist.checkPass !== '') {
                    this.$refs.userlist.validateField('checkPass');
                }
                callback();
            }
        };

        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.userlist.passWord) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            userlist: {
                userName: '',
                phoneNum: '',
                passWord: '',
                checkPass: '',
                dengluTime: '',
                createTime: '',
                isdelete: 0
            },
            rules: {
                userName: [
                    { required: true, message: '请输入你的名称', trigger: 'blur' },
                ],
                phoneNum: [
                    { required: true, message: '请输入你的手机号', trigger: 'blur' },
                    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
                ],
                passWord: [
                    { validator: validatePass, trigger: 'blur' },
                    { pattern: /^\d{4,12}$/, message: '不符合要求，密码4-12位数字', trigger: 'blur' },
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            },
            _res: [],
            gettime: "",
        }
    },
    methods: {
        // 点击重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        async getUserList() {
            const _data = await getUserList();
            this._res = await (_data).data;
        },

        // 点击注册
        handleValid() {
            let _res = this._res
            let loginsucess = true;
            for (let i = 0; i < _res.length; i++) {
                if (loginsucess) {
                    if (_res[i].phoneNum == this.userlist.phoneNum) {
                        loginsucess = false;

                        document.getElementById('souji').focus();

                        return alert('手机号已存在')

                    } else if (i == _res.length - 1) {
                        // console.log(111);
                        this.getTime()

                        addUser(this.userlist).then(() => {

                            addUserInfor(this.userlist)

                            window.sessionStorage.setItem("registerone", this.userlist.phoneNum);
                            this.userlist = {
                                userName: '',
                                phoneNum: '',
                                passWord: '',
                                checkPass: '',
                                createTime: '',
                                dengluTime: '',
                                isdelete: 0
                            },

                                alert('注册成功，快去登录吧！')
                        })
                        return this.$router.push('/login')
                    }
                }

            }
        },

        async submitForm(formName) {

            this.$refs[formName].validate((valid) => {

                if (valid) {
                    this.handleValid()

                } else {
                    alert('注册失败，请重新注册')
                    return false;
                }

            })
        },

        // 获取当前时间
        getTime() {
            var _this = this;
            let yy = new Date().getFullYear();
            var mm =
                new Date().getMonth() > 9
                    ? new Date().getMonth() + 1
                    : new Date().getMonth() == 9
                        ? new Date().getMonth() + 1
                        : '0' + (new Date().getMonth() + 1);
            var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
            let hh = new Date().getHours();
            let mf =
                new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
            let ss =
                new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
            _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
            this.userlist.createTime = this.gettime
            // console.log(this.gettime);
        },

        // 去登陆
        goLogin() {
            this.$router.push('/login')
        }

    },
    mounted() {
        this.getUserList()
    }
}

</script>

<style lang="less" scoped>
.RegisterView {
    width: 100vw;
    height: 100vh;
    background-color: #5EB2FF;

    .Register-one {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .Register-top {
            position: absolute;
            display: flex;
            width: 750px;
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
            background-color: #2C89E0;

            .top-left {
                position: relative;
                width: 50%;

                .left-title {
                    margin-top: 90px;

                    p {
                        margin-bottom: 15px;
                        padding-left: 60px;
                        color: #fff;
                        font-size: 16px;
                        font-weight: 600;

                    }
                }

                .left-btn {
                    position: absolute;
                    display: flex;
                    align-items: center;
                    left: 20px;
                    bottom: 20px;

                    .btn {
                        width: 30px;
                        height: 8px;
                        margin-right: 10px;
                        background-color: #ffffff;
                        opacity: .5;
                    }
                }

            }

            .top-right {
                width: 50%;
                height: 100%;
                background-color: #fff;

                .right-title {
                    margin: 30px auto 20px;
                    font-weight: 600;
                    text-align: center;
                }

                .right-input {
                    width: 80%;
                    margin: 0 auto;

                    .el-form-item {
                        width: 100%;
                        height: 40px;
                        margin-bottom: 18px;
                        background-color: none;
                        border: 0;
                        border-bottom: 1px solid #eee;
                        outline: none;
                    }

                }

                .right-btn {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 80%;
                    margin: 20px auto 0;

                    .btn {
                        width: 40%;
                        height: 40px;
                        border-radius: 5px;
                        background-color: #4c9de9;
                        color: #fff;
                        border: 0;
                        cursor: pointer;
                    }
                }

                .right-login {
                    padding-top: 10px;
                    text-align: left;

                    span {
                        text-decoration: underline;
                        color: #2C89E0;
                        padding-left: 37.5px;
                        cursor: pointer;
                    }
                }

            }

        }


    }
}
</style>